<template>
  <!-- 新增-->
  <component
    wd="900"
    :is="cfg.model"
    v-model:window_open="data.md_new"
    :title="`新增首领数据`"
  >
    <template #content>
      <div class="stitle">· 头像信息 ·</div>
      <div class="_box0">
        <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
          <n-gi span="2">
            <div class="_banr">
              <div class="_2_title2" style="width: 125px">
                <div>首领图像：</div>
              </div>
              <div class="_2_val">
                <n-upload
                  list-type="image-card"
                  :action="`https://gtimg.ww2.ren/upload.php?type=upimg_boss&authkey=${cfg.user?.authkey}&uid=${cfg.user?.uid}`"
                  @finish="set.imgfin_new"
                  :max="1"
                >
                  <n-upload-dragger> 上传图片 </n-upload-dragger>
                </n-upload>
              </div>
            </div>
          </n-gi>
        </n-grid>
      </div>
      <div class="_box0">
        <div class="stitle">· 首领配置 ·</div>
        <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
          <template v-for="item in set.md_box">
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 80px">
                  <div>{{ item.name }}</div>
                </div>
                <div class="_2_val">
                  <template v-if="item.type == 'input'">
                    <n-input
                      :size="cfg.sizebtn"
                      v-model:value="data.new_data[item.key]"
                      :placeholder="item.tips"
                    />
                  </template>
                </div>
              </div>
            </n-gi>
          </template>
        </n-grid>
      </div>
    </template>
    <template #footer>
      <n-button type="gt_y" :size="cfg.sizebtn" @click="set.save_new(data.new_data)"
        >新增首领</n-button
      >
    </template>
  </component>

  <!-- 编辑-->

  <component
    wd="900"
    :is="cfg.model"
    v-model:window_open="data.md_edit"
    :title="`编辑〔${data.ld_data.name}〕首领数据`"
  >
    <template #content>
      <div class="_box0">
        <div class="stitle">· 首领配置 ·</div>
        <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
          <template v-for="item in set.md_box">
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 80px">
                  <div>{{ item.name }}</div>
                </div>
                <div class="_2_val">
                  <template v-if="item.type == 'input'">
                    <n-input
                      :size="cfg.sizebtn"
                      v-model:value="data.ld_data[item.key]"
                      :placeholder="item.tips"
                    />
                  </template>
                </div>
              </div>
            </n-gi>
          </template>
        </n-grid>
      </div>
    </template>
    <template #footer>
      <n-button type="gt_y" :size="cfg.sizebtn" @click="set.edit(data.ld_data)"
        >编辑数据</n-button
      >
    </template>
  </component>

  <!-- 页面 -->
  <div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 8px">
    <div class="nbox1" style="max-width: 100%" v-if="cfg.mobile == false">
      <div v-if="cfg.qxpd(['bz']) == true">
        <n-flex justify="center" align="center">
          <n-button type="warning" @click="set.new">新增首领</n-button>
        </n-flex>
      </div>
      <n-scrollbar x-scrollable>
        <div class="_list">
          <div class="_listbox">
            <div style="width: 100px" class="_df">首领图像</div>
            <div style="width: 155px" class="_df">首领名称</div>
            <div style="width: 350px" class="_df">异常数值</div>

            <div style="width: 100px" class="_df" v-if="cfg.qxpd(['bz']) == true">
              操作
            </div>
          </div>
          <div style="display: flex; flex-direction: column; gap: 4px">
            <template v-for="item in data.bosslist">
              <div class="_rolebox">
                <div style="width: 100px" class="_df">
                  <img
                    :class="cfg.mobile == true ? `_bossava_m` : `_bossava`"
                    :src="
                      item.icon
                        ? `${cfg.cdn2}?file=${item.icon}&h=65`
                        : `${cfg.cdn2}?file=boss/${item.name}.png&h=65`
                    "
                  />
                </div>
                <div style="width: 155px" class="_rolename _df">
                  {{ item.name }}
                </div>
                <div style="width: 350px" class="_df">
                  <div style="display: flex; gap: 8px">
                    <n-button :size="cfg.sizebtn" strong secondary
                      >重伤：{{ item.重伤?.toFixed(2) ?? 空 }}
                    </n-button>
                    <n-button :size="cfg.sizebtn" strong secondary
                      >击倒：{{ item.击倒?.toFixed(2) ?? 空 }}
                    </n-button>
                    <n-button :size="cfg.sizebtn" strong secondary
                      >击飞：{{ item.击飞?.toFixed(2) ?? 空 }}
                    </n-button>
                  </div>
                </div>

                <div style="width: 100px" class="_df" v-if="cfg.qxpd(['bz']) == true">
                  <n-button :size="cfg.sizebtn" @click="set.open_edit(item)">
                    编辑
                  </n-button>
                </div>
              </div>
            </template>
          </div>
        </div>
      </n-scrollbar>
    </div>
    <div class="nbox1" style="max-width: 100%" v-if="cfg.mobile == true">
      <div v-if="cfg.qxpd(['bz']) == true">
        <n-flex justify="center" align="center">
          <n-button type="warning" @click="set.new">新增首领</n-button>
        </n-flex>
      </div>
      <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 170)">
        <template v-for="item in data.bosslist">
          <n-gi span="1">
            <div class="_work_sid_list">
              <n-grid class="ngrid" y-gap="4" x-gap="4" :cols="3">
                <n-gi span="3">
                  <n-statistic>
                    <div>{{ item.name }}</div>
                    <div style="margin-top: 8px">
                      <img
                        :class="cfg.mobile == true ? `_bossava_m` : `_bossava`"
                        :src="
                          item.icon
                            ? `${cfg.cdn2}?file=${item.icon}&h=65`
                            : `${cfg.cdn2}?file=boss/${item.name}.png&h=65`
                        "
                      />
                    </div>
                  </n-statistic>
                </n-gi>

                <n-gi span="1">
                  <n-statistic label="重伤">
                    {{ item.重伤 ?? 空 }}
                  </n-statistic>
                </n-gi>
                <n-gi span="1">
                  <n-statistic label="击倒">
                    {{ item.击倒 ?? 空 }}
                  </n-statistic>
                </n-gi>
                <n-gi span="1">
                  <n-statistic label="击飞">
                    {{ item.击飞 ?? 空 }}
                  </n-statistic>
                </n-gi>
                <n-gi span="3">
                  <n-hr />
                  <div style="display: flex; justify-content: center">
                    <n-button
                      type="gt_n"
                      :size="cfg.sizebtn"
                      @click="set.open_edit(item)"
                    >
                      编辑
                    </n-button>
                  </div>
                </n-gi>
              </n-grid>
            </div>
          </n-gi>
        </template>
      </n-grid>
    </div>
  </div>
</template>

<style scoped>
._work_sid_list {
  background-color: #3d4656;
  padding: 8px;
  display: flex;
  flex-direction: row;
  height: 100%;
  border-radius: 5px;
}
._ava {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: var(--ava2-bg);
  padding: var(--ava2-pd);
  border: var(--ava2-border);
}
._bossava_m {
  max-width: 50px;
  max-height: 50px;
}

._listbox {
  background-color: #3a5179;
  padding: 8px;
  display: flex;
  flex-direction: row;
}
._df {
  display: flex;
  align-items: center;
  justify-content: center;
}
._rolename {
  font-size: 0.9em;
}
._list {
  gap: 4px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
._rolebox {
  background-color: #3d4656;
  padding: 8px;
  display: flex;
  flex-direction: row;
}
</style>

<script>
import { cfg } from "@/cfg/cfg.js";
import { get_boss } from "@/cfg/function.js";

export default {
  setup() {
    const set = {
      imgfin_new: (e) => {
        try {
          let obj = JSON.parse(e.event.target.response);
          if (obj.code == -1) {
            e.file.status = "error";
            cfg.msg.error("上传失败，" + obj.msg);
            return false;
          }
          data.new_data.icon = `boss/` + obj.data.path;
        } catch (error) {
          cfg.msg.error("上传失败，" + error);
          e.file.status = "error";
          return false;
        }
      },
      md_span: `3 500:2`,
      md_span2: `8 500:4`,
      new: () => {
        data.md_new = true;
        data.new_data = {};
      },
      md_box: [
        {
          type: `input`,
          name: `首领名称`,
          tips: `请输入首领名称`,
          key: `name`,
        },
        {
          type: `input`,
          name: `首领简称`,
          tips: `请输入首领简称`,
          key: `bname`,
        },
        {
          type: `input`,
          name: `重伤数值`,
          tips: `请输入重伤数值`,
          key: `重伤`,
        },
        {
          type: `input`,
          name: `击飞数值`,
          tips: `请输入击飞数值`,
          key: `击飞`,
        },
        {
          type: `input`,
          name: `击倒数值`,
          tips: `请输入击倒数值`,
          key: `击倒`,
        },
        {
          type: `input`,
          name: `图片路径`,
          tips: `上传后自动输入图片路径`,
          key: `icon`,
        },
      ],
      save_new: async (nd) => {
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "admin/boss",
            t3: "new",
            data: nd,
            authkey: cfg.user.authkey,
          },
        });
        if (res.data.code == 0) {
          data.md_new = false;
          cfg.msg.success(res.data.msg);
          //向bosslist头部添加nd数据
          data.bosslist.unshift(nd);
          data.bosslist[0]._id = {
            $oid: res.data.data.id,
          };
        } else {
          cfg.msg.error(res.data.msg);
        }
      },
      edit: async (ld) => {
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "admin/boss",
            t3: "edit",
            data: ld,
            authkey: cfg.user.authkey,
          },
        });
        if (res.data.code == 0) {
          data.md_edit = false;
          cfg.msg.success(res.data.msg);
        } else {
          cfg.msg.error(res.data.msg);
        }
      },
      open_edit: (dt) => {
        data.md_edit = true;
        data.ld_data = dt;
      },
    };
    let data = reactive({
      loading: true,
      md_new: false,
      md_edit: false,
      ld_data: {},
      new_data: {},
      bosslist: [],
    });

    onMounted(async () => {
      await get_boss();
      data.bosslist = cfg.bosslist.slice();
    });
    return { data, cfg, set };
  },
};
</script>
